<!-- 视图区域 -->
<template>
  <button v-bind="attrs">我是一个普通按钮</button>
</template>

<!-- 脚本区域 -->
<script>
export default {
  name: 'App',
  data: () => ({
    attrs: {
      class: 'redBack',
      id: 'btnBorderBlue',
    },
  }),
}
</script>

<script setup>
import { reactive } from 'vue'

let attrs = reactive({
  class: 'error',
  id: 'borderBlue',
})
</script>

<style scoped>
button {
  padding: 10px 20px;
}

.redBack {
  background-color: #d25e5e;
  color: white;
}

#btnBorderBlue {
  border: 2px solid #408ae5;
}
</style>
